<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
	<ng-template ngSwitchCase="list">
		<test-modal #viewModal titleName='Measurement Filters'></test-modal>
		<test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this Measurement Filter will affect the following components','Deleting this Measurement Filter will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
						[showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteMeasFilter($event)">
		</test-modal>		
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
	</ng-template>

	<ng-template ngSwitchDefault>
		<form [formGroup]="measfilterForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveMeasFilter() : updateMeasFilter()">
		<ng-container>
			<div class="row well well-sm">
				<h4 style="display:inline">
				<i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
			</h4>
			<div class="pull-right" style="margin-right: 20px">
        <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!measfilterForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
        <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!measfilterForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
        <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
			</div>
		</div>
	</ng-container>
	<div class="form-fixed-height">

			<div class="well well-sm">
	      <span class="editsection">
	        Core Settings
	      </span>
	      <div class="form-group" style="margin-top: 25px">
				<label class="control-label col-sm-2" for="ID">ID</label>
				<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of Measurement Filters "></i>
				<div class="col-sm-9">
					<input formControlName="ID" id="ID" [ngModel]="measfilterForm.value.ID"/>
					<control-messages [control]="measfilterForm.controls.ID"></control-messages>
				</div>
			</div>

			<div class="form-group">
				<label class="control-label col-sm-2" for="IDMeasurementCfg">Measurements</label>
				<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="List of Measurements to attach the filter"></i>
				<div class="col-sm-9">
					  <ss-multiselect-dropdown [options]="selectmeas" formControlName="IDMeasurementCfg" [texts]="myTexts" [settings]="mySettings" [ngModel]="measfilterForm.value.IDMeasurementCfg"></ss-multiselect-dropdown>
					<control-messages [control]="measfilterForm.controls.IDMeasurementCfg"></control-messages>
				</div>
			</div>
	</div>
	<div class="well well-sm">
		<span class="editsection">
			Filter Settings
		</span>
		<div class="form-group" style="margin-top: 25px">
				<label class="control-label col-sm-2" for="FType">Filter type</label>
				<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Filter input source: file or condiction OID"></i>
				<div class="col-sm-9">
					<select formControlName="FType" id="FType" (click)="setDynamicFields(measfilterForm.value.FType, true)" [ngModel]="measfilterForm.value.FType">
						<option value="file">File</option>
						<option value="OIDCondition">OID Condition</option>
						<option value="CustomFilter" >Custom Filter</option>
					</select>
					<control-messages [control]="measfilterForm.controls.FType"></control-messages>
				</div>
			</div>

			<div *ngIf="measfilterForm.controls.FilterName && measfilterForm.value.FType === 'file'">
				<div class="form-group">
					<label class="control-label col-sm-2" for="FilterName">File Name</label>
					<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="A valid filename cointained in the conf/ directory"></i>
					<div class="col-sm-9">
						<input formControlName="FilterName" id="FilterName" [ngModel]="measfilterForm.value.FilterName"/>
						<control-messages [control]="measfilterForm.controls.FilterName"></control-messages>
					</div>
				</div>
			</div>

			<div *ngIf="measfilterForm.controls.FilterName && measfilterForm.value.FType === 'OIDCondition'">
        <div class="form-group">
					<label class="control-label col-sm-2" for="FilterName">Oid Condition</label>
					<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="valid OID condition in the OID conditions table"></i>
					<div class="col-sm-9">
						<ss-multiselect-dropdown [options]="selectoidcond" formControlName="FilterName" [texts]="myTexts" [settings]="mySettings" [ngModel]="measfilterForm.value.FilterName"></ss-multiselect-dropdown>
						<control-messages [control]="measfilterForm.controls.FilterName"></control-messages>
					</div>
				</div>
			</div>


        <div class="form-group" *ngIf="measfilterForm.controls.FilterName && measfilterForm.value.FType === 'CustomFilter'">
					<label class="control-label col-sm-2" for="FilterName">Custom Filter</label>
					<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Valid Custom FIlter on the Custom Filter Table"></i>
					<div class="col-sm-9">
						<ss-multiselect-dropdown [options]="selectCustomFilters" formControlName="FilterName" [texts]="myTexts" [settings]="mySettings" [ngModel]="measfilterForm.value.FilterName" ></ss-multiselect-dropdown>
						<control-messages [control]="measfilterForm.controls.FilterName"></control-messages>
					</div>
				</div>
				<div class="form-group" *ngIf="measfilterForm.controls.EnableAlias">
					<label class="control-label col-sm-2" for="EnableAlias">Enable alias</label>
					<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Allow get measurement tag from alias in the file"></i>
					<div class="col-sm-9">
						<select formControlName="EnableAlias" id="EnableAlias" [ngModel]="measfilterForm.value.EnableAlias">
							<option value="true">Enable</option>
							<option value="false">Disable</option>
						</select>
						<control-messages [control]="measfilterForm.controls.EnableAlias"></control-messages>
					</div>
				</div>
		</div>
		<div class="well well-sm">
			<span class="editsection">
				Extra Settings
			</span>
			<div class="form-group" style="margin-top: 25px">
				<label class="control-label col-sm-2" for="Description">Description</label>
				<i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the SNMP Device"></i>
				<div class="col-sm-9">
					<textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="measfilterForm.value.Description"> </textarea>
					<control-messages [control]="measfilterForm.controls.Description"></control-messages>
				</div>
			</div>
		</div>
	</div>
</form>
	</ng-template>
</ng-container>
